import React, { FC } from 'react';
import { Collapse as AntdCollapse } from 'antd';
import { CollapseProps as AntdCollapseProps } from 'antd/lib/collapse';
import { observer } from 'mobx-react';

import Icons from '@/components/Icons';
import './index.less';

export const Panel = AntdCollapse.Panel;

export type CollapseProps = AntdCollapseProps & {
  children?: React.ReactNode;
};

const Collapse: FC<CollapseProps> = ({ children, ...rest }) => {
  return <AntdCollapse {...rest}>{children}</AntdCollapse>;
};

Collapse.defaultProps = {
  ...AntdCollapse.defaultProps,
  className: 'rb-collapse',
  expandIconPosition: 'start',
  expandIcon: ({ isActive }) => <Icons type="CaretRightOutlined" rotate={isActive ? 90 : 0} />
};

export default observer(Collapse);
